<template>
  <template v-if="showTooltip">
    <div style="height: 100%">
      <n-tooltip :placement="placement" trigger="hover">
        <template #trigger>
          <slot></slot>
        </template>
        {{ tooltipContent }}
      </n-tooltip>
    </div>
  </template>
  <template v-else>
    <div style="height: 100%">
      <slot></slot>
    </div>
  </template>
</template>

<script lang="ts" setup>
// 提示窗的简单的封装
import { PopoverPlacement } from "naive-ui";

interface Props {
  /** tooltip显示文本 */
  tooltipContent?: string;
  /** tooltip的位置 */
  placement?: PopoverPlacement;
  /** 反转模式下 */
  inverted?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  tooltipContent: "",
  placement: "bottom",
  inverted: false,
});

const showTooltip = computed(() => Boolean(props.tooltipContent));
</script>

<style scoped></style>
